<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="120px" :rules="rules">
    <el-form-item label="应用名称" prop="name">
      <el-input v-model="form.name" auto-complete="on" placeholder="请输入应用名称"></el-input>
    </el-form-item>
    <el-form-item label="密钥" prop="secret">
      {{form.secret}}
    </el-form-item>
    <el-form-item label="通信网关" prop="gateway">
      <el-input v-model="form.gateway" auto-complete="on" placeholder="请输入通信网关"></el-input>
    </el-form-item>
    <el-form-item label="应用推送配置" prop="hooks" v-if="hasPower('appPush')">
      <span v-for="i in form.hooks" style="margin-right: 10px">{{logTypePush[i]}}</span>
      <el-button type="" size="mini" @click="handleRoleOpen(form, 'hooks')" >绑定服务</el-button>
    </el-form-item>
    <el-form-item label="应用接口配置" prop="apis" v-if="hasPower('appApi')">
      <span v-for="i in form.apis" style="margin-right:10px;">{{logTypeApi[i]}}</span>
      <el-button type="" size="mini" @click="handleRoleOpen(form, 'apis')" >绑定服务</el-button>
    </el-form-item>
    <el-form-item>
  <el-button type="primary" @click="onSubmit">保存</el-button>
  </el-form-item>
  </el-form>

  <el-dialog title="接口配置" :visible.sync="dialogRole">
    <div class="">
      <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkVal" style="padding: 20px 0;" @change="handleCheckChange">
          <el-checkbox v-for="(o, i) in checkOpts" :key="i" :label="i">{{o}}</el-checkbox>
        </el-checkbox-group>
      </template>
    </div>
    <el-button type="success" @click="handleRoleUp">确定</el-button>
  </el-dialog>

  </div>

</template>

<script>
import { getOne, postOne } from '@/api/app'
import { logTypeApi, logTypePush, hasPower } from '@/utils/auth'

export default {
  data() {
    const ValidateName = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('应用名称不能为空'))
      } else {
        callback()
      }
    }
    const ValidateSecret = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('通信接口不能为空'))
      } else {
        callback()
      }
    }
    const ValidateGateway = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('应用名称不能为空'))
      } else {
        callback()
      }
    }
    const ValidateHooks = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('通信接口不能为空'))
      } else {
        callback()
      }
    }
    const ValidateApis = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('通信接口不能为空'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        gateway: '',
        secret: '',
        apis: [],
        hooks: [],
        enable: true
      },
      edit: '',
      logTypeApi,
      logTypePush,
      checkOpts: {},
      checkAll: false,
      checkVal: [],
      isIndeterminate: false,
      dialogRole: false,
      listLoading: true,
      rules: {
        name: [{ required: true, trigger: 'blur', validator: ValidateName }],
        gateway: [{ required: true, trigger: 'blur', validator: ValidateGateway }],
        secret: [{ required: true, trigger: 'blur', validator: ValidateSecret }],
        apis: [{ required: true, trigger: 'blur', validator: ValidateApis }],
        hooks: [{ required: true, trigger: 'blur', validator: ValidateHooks }]
      }
    }
  },
  created() {
    getOne({
      _id: this.$route.query._id
    }).then(info => {
      Object.assign(this.form, info.data)
      if (!hasPower('appPush')) delete this.form.hooks
      if (!hasPower('appApi')) delete this.form.apis
      console.log(this.form)
    })
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkVal = val ? Object.keys(this.checkOpts) : []
      this.isIndeterminate = false
    },
    handleCheckChange(val) {
      const num = val.length
      const total = Object.keys(this.checkOpts).length
      this.checkAll = num === total
      this.isIndeterminate = num > 0 && num < total
    },
    handleRoleOpen(o, type) {
      this.checkOpts = type === 'hooks' ? logTypePush : logTypeApi
      this.edit = type
      this.dialogRole = true
      this.form = Object.assign({}, o)
      this.checkVal = o[type]
      const num = this.checkVal.length
      const total = Object.keys(this.checkOpts).length
      this.checkAll = num === total
      this.isIndeterminate = num > 0 && num < total
    },
    handleRoleUp() {
      var vals = []
      this.checkVal.forEach(v => {
        if (this.checkOpts[v]) vals.push(v)
      })
      var post = {}
      post[this.edit] = vals
      this.form[this.edit] = vals
      this.dialogRole = false
      // postOne({
      //   _id: this.form._id
      // }, post).then(response => {
      //   if (response.code === 30000) {
      //     this.$message({
      //       type: 'success',
      //       message: '更新成功!'
      //     })
      //     this.type = this.$route.query.type
      //     this.form[this.edit] = vals
      //     this.dialogRole = false
      //   } else {
      //     this.$message({
      //       type: 'info',
      //       message: '更新失败!'
      //     })
      //   }
      // })
    },
    onSubmit() {
      postOne({
        _id: this.form._id
      }, this.form).then(res => {
        if (res.code === 30000) {
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
          this.$router.replace('/app/list')
        } else {
          this.$message('更新失败!')
        }
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
